<template>
  <div  class="htmlCon">
      <div>
          <div>
              <div >
                  <el-collapse  :class="moods" v-model="activeName" accordion>
                    <el-collapse-item title="它好漂亮" name="1" disabled>
                      <div><i class="iconfont icon-elemo"></i><h1>Element-ui</h1></div>
                       <blockquote>
                            <h2>node安装</h2>
                            <pre>npm install element-ui -S || yarn add element-ui -S</pre>
                            <h2>CDN链接（摘自官网）</h2>
                            <h3>引入样式 &lt;link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"&gt;</h3>
                            <h3>引入组件库：&lt;script src="https://unpkg.com/element-ui/lib/index.js"&gt;&lt;/script&gt;</h3>
                            <h2>按需加载</h2>
                            <pre>npm install babel-plugin-component -D</pre>
                            <h3>在babel.config.js中修改为：</h3>
                            <pre>
            {
                "presets": [["es2015", { "modules": false }]],
                "plugins": [
                    [
                    "component",
                    {
                        "libraryName": "element-ui",
                        "styleLibraryName": "theme-chalk"
                    }
                    ]
                ]
                }</pre>
                            <h4>注意这里的es2015如果使用途中报错误，把他修改为 @babel/preset-env就可以了</h4>
                            <h3>接下来我们就可以在我们的vue项目中使用了，比如:</h3>
                            <pre>
                            main.js
                                import {Button} from "element-ui"
                                Vue.use(Button)
                            App.vue
                                &lt;el-button&gt;&lt;/el-button>&gt;
                            </pre>
                        </blockquote>
                        <el-divider>    </el-divider>
                      <div><h1>Stay tuned for</h1></div>
                      <!-- <div><i class="iconfont icon-antdesign"></i><h1>Stay tuned for</h1></div> -->
                        
                    </el-collapse-item>
                    </el-collapse>
              </div>
          </div>
       
      </div>
         <div>
          
          </div>
  </div>
</template>

<script>
export default {
    name: "BasicUI",
    data(){
        return {
            activeName: ["1"],
            moods: "conWrapper",
        }
    },
    methods: {
        basicData(){
            window.scrollTo(100,120);
        },
        variable(){
            window.scrollTo(100,600);
        },
        testData(){
            window.scrollTo(100,900);
        },
        fun(){
            window.scrollTo(100,1350);
        },
        top(){
            window.scrollTo(100,0);
        }
        
    }
}
</script>

<style scoped>

.conWrapper {
  width: 900px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 5px 5px 20px 5px #999;
  padding: 0px 20px;
  border-bottom-color: transparent;
  margin-right: 50px;
}
.htmlCon {
  display: flex;
  justify-content: center;
}
.htmlNav {
  position: fixed;
}
h2 {
    text-decoration: underline;
}
</style>